<!--
 * @Description: 地图
 * @Author: charles
 * @Date: 2021-05-05 23:34:12
 * @LastEditors: wjn
 * @LastEditTime: 2022-01-08 20:24:07
-->
<template>
  <div ref="map_container" style="height: 100%"></div>
</template>

<script>
import { Axios } from 'axios'
import {get} from '../../../utils/request'
export default {
    data() {
      return {
      }
    },
    created() { //钩子函数

    },
    mounted() {
      this.initMap()
    },
    methods:{
      initMap() {
        //1.地图初始化
        var map = new AMap.Map(this.$refs.map_container, {
          zoom:11,//级别
          center: [112.583804,37.423954],//中心点坐标
          viewMode:'3D'//使用3D视图
        });
        //2.行政区轮廓
        let polygons=[];
        var opts = {
          subdistrict:0, //获取边界不需要返回下级行政区
          extensions:'all', //返回行政区边界坐标组等具体信息
          level:'district' //查询行政级别为 市
        };
        let district = new AMap.DistrictSearch(opts);
        district.setExtensions('all');
        district.search('晋中市',function(status,result){
          map.remove(polygons)//清除上次结果
          polygons = [];
          var bounds = result.districtList[0].boundaries;
          if(bounds) {
            for (var i = 0,l = bounds.length;i < l;i++){
              //生成行政区划polygon
              var polygon = new AMap.Polygon({
                strokeWeightt:1,
                path:bounds[i],
                fillOpacity:0.4,
                fillColor:'#80d8ff',
                strokeColor:'#0091ea'
              });
              polygons.push(polygon);
            }
          }
          map.add(polygons)
          map.setFitView(polygons);//视口自适应
        });
        //3.打点
        let url = "/dashboard/findEngineerDeviceTree"
        get(url).then(resp => {
          let edTree = resp.data;
          let devices = [];
          edTree.forEach(item => {
            devices.push(...item.children)
          })
          console.log(devices);
          //每一个设备打一个点
          devices.forEach(item => {
            var marker = new AMap.Marker({
              position: item.position,
              title: item.name
            });
            // 将创建的点标记添加到已有的地图实例：
            map.add(marker);
          })
        })
        
      }
    }
}
</script>

<style scoped>

</style>
